<template>
  <div class="home">
    <van-sticky>
      <div class="head-top">
        <gltitle :is_mt="true" :is_notice="false" :is_back="true" :is_name="true"></gltitle>
      </div>
    </van-sticky>
    <div class="task-title">
      <div class="flex items-center">
        <img class="task-icon" src="@/assets/images/task-icon.png" alt="">
        <div class="title">{{ title }}</div>
      </div>
      <img class="line2" src="@/assets/images/home/line2.png" alt="">
    </div>
    <div class="task-nav">
      <div :class="{ act: taskid == item.id }" v-for="item in tablist" :key="item.id" @click="handlertab(item.id)">
        {{ item.name }}
      </div>
    </div>
    <div class="container">
      <div class="min">
        <div class="empty db rel" style="z-index: 3" v-if="emptyShow">
          <div class="flexs">
            <van-empty class="custom-image" :image="require('../../assets/images/Group12.png')"
                       :description="$t('page1.doc45')"/>
          </div>
        </div>

        <!-- <van-pull-refresh v-model="refreshing" :success-text="$t('load.refreshed')" @refresh="onRefresh(0)"
          head-height="100" v-if="!emptyShow">
          <van-list v-model="loading" :finished="finished" :finished-text="$t('load.no_more')"
            :loading-text="$t('load.loading')" @load="onLoad" :immediate-check="check"> -->
        <ul class="list">
          <li class="item" v-for="(item, k) in datalist" :key="k">
            <div class="item-top">
              <div class="top-name">
                <div class="title">{{ item.name }}</div>
                <div class="til">{{ item.description }}</div>
              </div>

            </div>
            <div class="receive-box">
              <div class="amount">
                {{ $t("page.待领取数量") }}: &nbsp;<span>{{ item.waitReceiveAmount || 0 }}</span>
              </div>
              <div class="top-btn">
                <div class="start" v-if="!item.hasComplete && !item.hasReceive">{{ $t('page.进行中') }}</div>
                <div class="start" @click="handlerReceive(item)" v-else-if="!item.hasComplete && item.hasReceive">{{
                    $t('page.领取奖励')
                  }}
                </div>
                <div v-else class="start">{{ $t('page.已完成') }}</div>
              </div>
            </div>
            <div class="info" v-if="taskid == 5 &&!item.hasComplete &&!item.hasReceive">
              <div class="line"><span
                :style="{ width: +(item.currentCount / item.effectiveCount) * 100 + '%' }"></span></div>
              <div class="num"><span>{{ item.currentCount }}</span>/{{ item.effectiveCount }}</div>
            </div>
          </li>
        </ul>
        <!-- </van-list>
        </van-pull-refresh> -->
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      title: this.$t("page.任务列表"),
      cid: "",
      tabData: [],
      datalist: [],
      loading: false,
      finished: false,

      totalPage: "",
      pageSize: 0,
      refreshing: false,
      emptyShow: false,
      datalistNum: 0,
      check: false,
      taskid: 2,
      isbtn: true,
      ismore: false,
      tablist: [
        {
          id: 2,
          name: this.$t('page.长期任务')
        },
        {
          id: 5,
          name: this.$t('page.固定任务')
        },
        {
          id: 6,
          name: this.$t('page.成长任务')
        }
      ]
    };
  },
  created() {
  },
  mounted() {
    // this.datalist=[];
    this.onLoad();
  },
  methods: {
    onLoad() {
      setTimeout(() => {
        if (this.refreshing) {
          this.datalist = [];
          this.refreshing = false;
        }
        this.getlist();
      }, 1000);
    },
    handlerReceive(info) {
      if (!this.isbtn) return;
      this.isbtn = false
      this.$post(this.URL.task.receive, {
        taskId: info.taskId
      }).then(res => {
        this.isbtn = true;
        if (res.code == 0) {
          this.$toast(this.$t('page.奖励领取成功'))
          this.onRefresh()
        } else {
          this.$toast(res.message)
        }
      })
    },
    handlertab(id) {
      if (!this.ismore) return;
      this.ismore = false;
      this.taskid = id;
      this.onRefresh();
    },
    onRefresh() {
      this.datalist = [];
      this.finished = false;
      this.loading = true;

      this.pageSize = 0;
      this.totalPage = "";

      this.onLoad();
    },
    getlist() {
      this.pageSize = this.pageSize + 1;
      if (this.pageIndex == this.totalPage) {
        this.loading = false;
        this.finished = true;

        return;
      }

      this.$post(this.URL.task.list, {
        page: this.pageSize,
        pageSize: 10,
        type: this.taskid
      }).then((res) => {
        this.ismore = true;
        this.emptyShow = false;
        if (res.code == 0) {
          if (res.code == 2001) {
            this.loading = true;
            this.finished = false;
            this.emptyShow = true;
            return;
          }
          if (res.data.length == 0) {
            this.emptyShow = true;
          }
          this.totalPage = res.data.length;
          this.pageIndex = 1;
          this.datalistNum = res.data.length;

          let initData = res.data;
          if (this.pageSize == 1) {
            this.datalist = initData;
          } else {
            this.datalist = this.datalist.concat(initData)
          }

          this.loading = false;
        } else {
          this.$toast(res.message);
        }
      });
    },

    path_url(url) {
      this.$router.push({
        path: url,
        query: {},
      });
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .head {
  background: rgba(17, 85, 59, .1) !important;
}

.head-top {
  //background: #330e11;
}

.home {
  background: #0d2623 url("../../assets/images/main-bg.png") no-repeat scroll;
  background-size: 100% 100vh;
  min-height: 100vh;
  padding-bottom: 60px;
}

.task-title {
  padding: 50px 33px 100px;

  .line2 {
    width: 186px;
    height: 5px;
    margin-top: 10px;
  }

  .task-icon {
    width: 19px;
  }

  .title {
    font-size: 22px;
    font-weight: 600;
    margin-left: 8px;
  }
}

.task-nav {
  margin-bottom: .24rem;
  display: flex;
  padding: .16rem 0.32rem 0;

  div {
    flex: 0 0 33.3%;
    padding-bottom: .3rem;
    text-align: center;
    font-size: .28rem;
    color: rgba(255, 255, 255, .6);
    border-bottom: 0.02rem solid rgba(255, 255, 255, .1);
    line-height: .28rem;
  }

  .act {
    position: relative;
    color: #fff;
    font-weight: 600;

    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      width: .48rem;
      height: .06rem;
      background: linear-gradient(90deg, rgba(172,255,175,1) 0%, rgba(28,255,242,1) 100%);
      border-radius: .12rem;
      transform: translateX(-50%);
    }
  }
}

.min {
  min-height: 75vh;
}

.list {
  padding-bottom: 0.8rem;

  .item {
    background: url("../../assets/images/task-item-bg.png");
    background-size: 100% 100%;
    border-radius: 0.2rem;
    padding: 18px 0.28rem;
    margin-bottom: 0.24rem;

    .item-top {
      display: flex;

      .top-name {
        flex: 1;
      }


    }

    .receive-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      line-height: 1.2;
      margin: .32rem 0;

      .amount {
        display: flex;
        align-items: center;
        color: #7BE9A5;
        font-size: .24rem;
        margin-right: .12rem;
      }

      .top-btn {
        min-width: 1.36rem;
        max-width: 1.9rem;


        div {
          width: 100%;
          border-radius: .8rem;
          font-size: .24rem;
          color: rgba(255, 255, 255, .6);
          display: -webkit-flex;
          justify-content: center;
          /*水平居中*/
          align-items: center;
          /*垂直居中*/
          -webkit-align-items: center;
        }

        .receive {
          width: 100%;
          text-align: center;
          color: #834700;
          background: linear-gradient(136deg, #FFED90 0%, #FFCA42 100%);
        }

        .start {
          border-radius: 8px 0 8px 0;
          color: #000;
          background: #02d080;
          text-align: center;
          padding: 6px 0;
        }
      }
    }

    // &:last-child {margin-bottom: 0;}
    .title {
      font-family: Sora;
      font-size: 0.28rem;
      font-weight: 600;
      line-height: 0.3rem;
      text-align: left;
      margin-bottom: 0.24rem;
    }

    .til {
      font-size: 0.24rem;
      font-weight: 400;
      line-height: 0.28rem;
      text-align: left;
      color: #dddddd;

      img {
        width: 0.28rem;
        height: auto;
        margin-left: 0.16rem;
        margin-right: 0.08rem;
      }

      span {
        font-family: Sora;
        font-size: 0.24rem;
        font-weight: 600;
        line-height: 0.28rem;
        text-align: left;
        color: #7BE9A5;
      }
    }

    .info {
      margin-top: 0.28rem;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .line {
        flex: 1;
        background: #151515;
        border-radius: 0.16rem;
        height: 0.16rem;
        position: relative;
        overflow: hidden;

        span {
          max-width: 100% !important;
          position: absolute;
          top: 0;
          left: 0;
          display: block;
          height: 100%;
          background: #7BE9A5;
          border-radius: 0.16rem;
        }
      }

      .num {
        margin-left: 0.2rem;
        flex-wrap: nowrap;
        font-family: PingFang SC;
        font-size: 0.24rem;
        font-weight: 400;
        line-height: 0.24rem;
        text-align: right;

        span {
          color: #7BE9A5;
        }
      }
    }
  }
}
</style>
